<!--PDF 预览-->
<template>
  <div>
    <div style="margin-bottom: 15px; text-align: right">
      <el-button type="primary" size="small" @click.stop="previousPage">
        上一页
      </el-button>
      <el-button type="primary" size="small" @click.stop="nextPage">
        下一页
      </el-button>
      <span>当前第{{ pdfPage }}页 / 共{{ pageCount }}页</span>
    </div>

    <div >
      <pdf
        :src="src"
        :page="pdfPage"
        style="display: inline-block; width: 100%"
        @num-pages="pageCount = $event"
        @page-loaded="pdfPage = $event"
      />
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
    // PDF预览
      src: null,
      pdfPage: 0,
      pageCount: 0
    }
  },
  watch: {
    pdfUrl: function(val) {
      this.previewPDF(val)
    }

  },
  methods: {
  // PDF预览
    previewPDF(pdfUrl) {
      this.src = pdf.createLoadingTask(pdfUrl)
    },

    // PDF改变页数
    previousPage() {
      var p = this.pdfPage
      p = p > 1 ? p - 1 : this.pageCount
      this.pdfPage = p
    },
    nextPage() {
      var p = this.pdfPage
      p = p < this.pageCount ? p + 1 : 1
      this.pdfPage = p
    }
  }
}
</script>
